<template>
  <el-dialog title="修改账单支付状态" :visible.sync="dialogStatus" width="600px">
    <el-form ref="ruleForm" :model="billForm">
      <el-form-item label="订单编号：" label-width="120px">
        <el-input v-model="billForm.trade_no" :disabled="true" />
      </el-form-item>
      <el-form-item label="手机号：" label-width="120px">
        <el-input v-model="billForm.mobile" :disabled="true" class="mobile_input" />
        <!-- <el-button class="mobile_btn" type="text">更改手机号</el-button> -->
        <p style="line-height: 23px; width: 69%; margin-top: 10px; color: #999">
          如需更改手机号请到营销中心-增值服务-短信提醒-商户修改账单线下支付中修改
        </p>
      </el-form-item>
      <el-form-item label="验证码：" label-width="120px">
        <el-input v-model="billForm.sms_code" placeholder="请输入验证码" maxlength="6" class="code_input" />
        <el-button v-if="codeShow && $hasMethod('#send')" class="code_btn" type="primary" @click="getCode()">获取验证码
        </el-button>
        <el-button v-else class="code_btn" type="info">{{ count }}秒后重试</el-button>
      </el-form-item>
      <el-form-item v-if="billForm.which_period" label="期数：" label-width="120px" :disabled="true">
        第{{ billForm.which_period }}期
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogStatus = false">取 消</el-button>
      <el-button type="primary" @click="onSubmit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {
  offlinePaySendCode,
  setOfflinePay
} from '@/api/finance'
export default {
  // props: ['orderId', 'leaseId', 'payData'],
  props: {
    orderId: {
      type: String,
      default: ''
    },
    leaseId: {
      type: String,
      default: ''
    },
    payData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      dialogStatus: false,
      billForm: {
        trade_no: '',
        mobile: '',
        which_period: '',
        sms_code: ''
      },
      codeShow: true,
      count: '',
      timer: null
    }
  },
  watch: {
    dialogStatus(val) {
      if (val) {
        this.$nextTick(() => {
          this.billForm = this.payData
        })
        this.clearTimer()
      }
    }
  },
  methods: {
    clearTimer() {
      this.codeShow = true
      clearInterval(this.timer)
      this.timer = null
    },
    getCode() {
      offlinePaySendCode(this.orderId, this.leaseId)
        .then((res) => {
          const TIME_COUNT = 120
          if (!this.timer) {
            this.count = TIME_COUNT
            this.codeShow = false
            this.timer = setInterval(() => {
              if (this.count > 0 && this.count <= TIME_COUNT) {
                this.count--
              } else {
                this.clearTimer()
              }
            }, 1000)
          }
        })
        .catch((err) => {
          console.log(err)
          this.$message.error('验证码发送失败')
        })
    },
    onSubmit() {
      if (!this.billForm.sms_code) {
        this.$message({
          message: '验证码不能为空',
          type: 'error'
        })
        return false
      }
      setOfflinePay({
        order_id: this.orderId,
        lease_id: this.leaseId,
        sms_code: this.billForm.sms_code
      })
        .then((res) => {
          this.dialogStatus = false
          this.billForm.sms_code = ''
          this.clearTimer()
          this.$parent.getList()
        })
        .catch((err) => { console.log(err) })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-input__inner {
  border: transparent;
  background: #f5f5f5;
}

.mobile_input {
  position: relative;
}

.mobile_btn {
  position: absolute;
  right: 165px;
}

.code_input {
  position: relative;
}

.code_btn {
  position: absolute;
  right: 150px;
}
</style>
